<template>
  <div>
    <div>
      <canvas
        v-for="(frame, index) in frames"
        :ref="`dicomCanvas_${index}`"
        :key="`frame_${index}`"></canvas>
    </div>
    <div>
      <label for="ww">窗宽(WW): </label>
      <input id="ww" type="number" v-model="windowWidth" />
      <label for="wl">窗位(WL): </label>
      <input id="wl" type="number" v-model="windowCenter" />
      <button @click="applyWindowing">应用窗位窗宽</button>
    </div>
  </div>
</template>

<script>
import cornerstone from "cornerstone-core"
import * as  dicomParser from 'dicom-parser'
import * as  cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
export default {
  name: "DicomViewer",
  data() {
    return {
      frames: [
       
      ], // 多帧图像数组
      windowWidth: 256, // 默认窗宽
      windowCenter: 128, // 默认窗位
    }
  },
  mounted() {
    // 加载多帧DICOM影像
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser

    cornerstoneWADOImageLoader.webWorkerManager.initialize({
      maxWebWorkers: navigator.hardwareConcurrency || 1, // 指定Web Worker数量
    })
    let imageUrls=[
        "wadouri:http://127.0.0.1:5500/src/assets/dcm/1.2.840.113619.2.391.61490.1694724847.21.1.512.dcm",
        "wadouri:http://127.0.0.1:5500/src/assets/dcm/1.2.840.113619.2.391.61490.1694725120.22.1.512.dcm",
        "wadouri:http://127.0.0.1:5500/src/assets/dcm/1.2.840.113619.2.391.61490.1694725133.23.1.512.dcm",
      ]
    // 加载第一个DICOM图像
    cornerstone.loadImage("wadouri:http://127.0.0.1:5500/src/assets/dcm/1.2.840.113619.2.391.61490.1694724847.21.1.512.dcm").then((image) => {
      this.frames.push(image)

      // 加载其他帧的DICOM图像
      // 这里假设有一个名为imageUrls的包含其他图像URL的数组
      imageUrls.forEach((url) => {
        cornerstone.loadAndCacheImage(url).then((frame) => {
          this.frames.push(frame)
        })
      })

      // 在canvas中显示第一帧图像
      const canvas = this.$refs.dicomCanvas_0
      cornerstone.enable(canvas)
      cornerstone.displayImage(canvas, this.frames[0])
    })
  },
  methods: {
    applyWindowing() {
      // 应用窗位窗宽
      this.frames.forEach((frame, index) => {
        cornerstoneTools.wwwc.activate(this.$refs[`dicomCanvas_${index}`], 1) // 激活窗位窗宽工具
        frame.windowWidth = this.windowWidth
        frame.windowCenter = this.windowCenter
        cornerstone.displayImage(this.$refs[`dicomCanvas_${index}`], frame)
      })
    },
  },
}
</script>

<style scoped>
/* 可选的样式 */
/* @import 'cornerstone-core/dist/cornerstone.css';
@import 'cornerstone-tools/dist/cornerstoneTools.css'; */
</style>
